@extends('layouts.admin')
@section('pageTitle', empty($activity->name)?'创建活动':'编辑活动')
@section('style')
    <style>
        .category-select {
            margin-top: 10px;
        }

        .card form [class*="col-"]:first-child {
            padding: 0 6px;
        }

        .card form [class*="col-"]:last-child {
            padding: 0 6px;
        }
        .template-active-img {
            width: 100%;
            /*height: auto;*/
            height: 26vw;
            overflow: hidden;
            position: relative;
        }
        .template-active-img img {
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .template-active-img .user-template-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -22px;
        }
        .template-active-img .template-qrcode {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.5);
            display: none;
        }
        .template-active-img:hover .template-qrcode{
            display:block
        }
        /*#competition-option-ul{*/
            /*list-style: none;*/
        /*}*/
    </style>
    <link href="/css/admin/activityDemo.css" rel="stylesheet"/>
@endsection

@section('content')
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-wizard" id="wizardCard">
                            <form id="activityForm" class="form-horizontal" method="" action="" ng-controller="ActivityController">
                                {{ csrf_field() }}
                                <div class="header text-center">
                                    <h3 class="title">创建一个新活动</h3>
                                </div>

                                <div class="content ">
                                    <ul class="nav f18 font-bold" style="display: none">
                                        <li><a href="#tab1" data-toggle="tab" style="text-align: right"><em class="process-icon mt5 mr5"></em>新建活动</a></li>
                                        <li><a href="#tab2" data-toggle="tab"><span class="process-line mb2 mr3"></span><em class="process-icon mt5 mr5"></em>选择模版<span class="process-line mb2 ml3"></span></a></li>
                                        <li><a href="#tab3" data-toggle="tab" style="text-align: left"><em class="process-icon mt5 mr5"></em>活动设置</a></li>
                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab1">
                                            <h5 class="text-center">请选择活动类型</h5>
                                            <div class="row">
                                                {{--<div class="col-md-5 col-md-offset-1" style="text-align: center">--}}

                                                    {{--<img src="/images/admin/common.png" alt="">--}}
                                                    {{--<h5>公众号H5</h5>--}}
                                                    {{--<p class="category">无须对接，一键生成和传播，适用于公众号和线下门店</p>--}}
                                                    {{--<a href="javascript:;"--}}
                                                       {{--class="btn btn-fill btn-danger btn-sm btn-round btn-wd category-select" data-category="{{\App\Models\Activity\Activity::ACTIVITY_CATEGORY_WECHAT}}">选择</a>--}}
                                                {{--</div>--}}
                                                <div class="" style="text-align: center">
                                                    <img style="height:324px" src="/images/admin/floated1.1.png" alt="">
                                                    {{--<h5>应用内H5</h5>--}}
                                                    <p class="category">SDK对接，定向投放和场景活动，适用于APP，微信商城等应用</p>
                                                    <a href="javascript:;"
                                                       class="btn btn-fill btn-danger btn-sm btn-round btn-wd category-select" data-category="{{\App\Models\Activity\Activity::ACTIVITY_CATEGORY_H5}}">选择</a>
                                                </div>
                                            </div>
                                            <input type="hidden" name="category" value="{{$activity->category}}">
                                        </div>

                                        <div class="tab-pane" id="tab2">
                                            <h5 class="text-center">请选择活动模版</h5>
                                            <div class="row">
                                                <div class="col-md-10 col-md-offset-1">
                                                    <div class="nav-container">
                                                        <ul class="nav nav-icons" role="tablist">
                                                            @foreach ($mts as $row)
                                                                <li @if ($loop->first) class="active"@endif>
                                                                    <a href="#tab_{{ $loop->index }}" role="tab" data-toggle="tab">
                                                                        {{$row['model_name']}}
                                                                    </a>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>

                                                    <div class="tab-content">
                                                        @foreach ($mts as $row)
                                                            <div class="tab-pane @if ($loop->first) active @endif" id="tab_{{ $loop->index }}">
                                                                <div class="card">

                                                                    <div class="content">
                                                                        <div class="row">
                                                                            @foreach($row['tpls'] as $tpl)
                                                                                <div class="col-xs-3">
                                                                                    <div class="card">
                                                                                        <div class="content">
                                                                                            <p class="category text-center">
                                                                                                {{$tpl->name}}</p>
                                                                                            <div class="template-active-img">
                                                                                                <img width="640" height="1008"
                                                                                                     src="{{$tpl->thumb}}">
                                                                                                <div class="template-qrcode">
                                                                                            <span class="text-center white-white user-template-btn">
                                                                                                <a class="btn btn-fill btn-danger btn-sm btn-round select-template" data-model="{{$tpl->model_id}}" data-detail="@php echo htmlspecialchars(json_encode($tpl->toArray())) ; @endphp" data-template="{{$tpl->id}}" href="javascript:;">使用</a>
                                                                                            </span>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                            <input type="hidden" name="model_id" value="{{$activity->model_id}}">
                                                            <input type="hidden" name="template_id" value="{{$activity->template_id}}">
                                                    </div> <!-- end tab content -->
                                                </div>
                                            </div>

                                        </div>

                                        <div class="tab-pane" id="tab3">
                                            <div class="row">
                                                <div class="col-xs-4 app" style="width: 38%">
                                                    <div class="phone-view">
                                                        <div class="app-preview">
                                                            <div class="app-header"></div>
                                                            <div class="app-content">
                                                                <div class="title">
                                                                    <h1><span id="page">@{{activity.name}}撒地方</span></h1>
                                                                </div>
                                                                <div class="modules" id="activity_preview">
                                                                    <iframe style="width: 100%;height: 100%;" ng-src="@{{activity.preview_src}}"  frameborder="0"></iframe>
                                                                </div>
                                                            </div>
                                                            <div class="app-mask-bottom"></div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-xs-8 activity-content" style="width: 62%">


                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                </div>

                                <div class="footer">
                                    <button type="button" class="btn btn-default btn-fill btn-wd btn-back pull-left">
                                        返回
                                    </button>

                                    <button type="button" class="btn btn-info btn-fill btn-wd btn-next pull-right">
                                        下一步
                                    </button>
                                    <button type="button" class="btn btn-info btn-fill btn-wd btn-finish pull-right"
                                            ng-click="onFinishWizard()">完成
                                    </button>

                                    <div class="clearfix"></div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    {{--@component('components.web.setting')--}}
    {{--@endcomponent--}}
@endsection
@section('script')
    <script src="/js/admin/jquery.bootstrap.wizard.min.js"></script>

    <script>
        $().ready(function () {

            //编辑活动
            @if(!empty($activity->id))
                 $.get('/web/modelRule',{id:'{{$activity->id}}'},function (res) {
                    $('.activity-content').html(res);
                    $('button.btn-wd.btn-back'). hide();
            });
            @endif

            /**
             * @desc  选择活动模板
             *        tpl_model//选择模板的model对象
             */
            var tpl_model;
            $('.select-template').on('click',function () {
                var model = $(this).data('model');
                var tpl = $(this).data('detail');
                var category = $('input[name=category]').val();
                console.log(tpl.model.rule);
                var newModels = ['roulette','shaking','quiz','scratch','golden-eggs','lucky-bag','open-red-packet','gifts','chopHand','exponent','takebook','alasd','lucky-card','sudoku','balance','lottory-box','team-pk','money-tree','iantern','catch-guost','climb-thegreatwall','collect-sticker','eat-chicken','invite-bonus','caizhangdie','chaikuaidi','dadishu','check-in','prize-code','plane-wars'];
                if(newModels.indexOf(tpl.model.rule)>-1){
                    if(tpl.model.rule=='quiz'){
                        location.href = '/web/activity/'+tpl.model.rule+'?category='+category+'&model_rule='+tpl.model.rule+'&model_id='+tpl.model_id+'&template_id='+tpl.id+'&activity_id=#/1/0';
                    }else{
                        location.href = '/web/activity/'+tpl.model.rule+'?category='+category+'&model_rule='+tpl.model.rule+'&model_id='+tpl.model_id+'&template_id='+tpl.id+'&activity_id=';
                    }
                }else{
                    $('input[name="model_id"]').val(tpl.model_id);
                    $('input[name="template_id"]').val(tpl.id);
                    @if($activity->id)
$.get('/web/modelRule',{template_id:'{{$activity->template_id}}'},function (res) {
                        $('.activity-content').html('');
                        $('.activity-content').html(res);
                    });
                    @else
$.get('/web/modelRule',{template_id:tpl.id},function (res) {
                        $('.activity-content').html('');
                        $('.activity-content').html(res);
                    });
                    @endif
                        tpl_model=tpl.model;
                    $('#wizardCard').bootstrapWizard('next');
                }
            })


            /**
             * @desc 请选择活动类型
             */
            $('.category-select').on('click', function () {
                $('#wizardCard').bootstrapWizard('next');
                var category = $(this).data('category');
                $('input[name="category"]').val(category);
            })

            /*初始化竞猜中的方法*/
            // initialCompetitionOpt();
            var bootstrapWizard = $('#wizardCard').bootstrapWizard({
                tabClass: 'nav nav-pills-steelblue',
                nextSelector: '.btn-next',
                previousSelector: '.btn-back',
                onNext: function (tab, navigation, index) {
                },
                onInit: function (tab, navigation, index) {
                    //check number of tabs and fill the entire row
                    var $total = navigation.find('li').length;
                    $width = 100 / $total;
                    $display_width = $(document).width();
                    if ($display_width < 600 && $total > 3) {
                        $width = 50;
                    }
                    navigation.find('li').css('width', $width + '%');
                    navigation.find('.process-line').css('width',$display_width*$width/100*0.3211+'px');
                    navigation.css('display','block');
                },
                onTabClick: function (tab, navigation, index) {
                    // Disable the posibility to click on tabs
                    return false;
                },
                onTabShow: function (tab, navigation, index) {
                    var $total = navigation.find('li').length;
                    var $current = index + 1;

                    var wizard = navigation.closest('.card-wizard');

                    @if(!empty($activity->id))
                        tpl_model ={!! json_encode($activity->model) !!};
                    @endif

                    // If it's the last tab then hide the last button and show the finish instead
                    if ($current >= $total) {
                        if(tpl_model.rule=='enroll'){

                            $(wizard).find('.btn-next').hide();
                            $(wizard).find('.btn-back').show();
                            $(wizard).find('.btn-finish').hide();
                        }else {
                            $(wizard).find('.btn-next').hide();
                            $(wizard).find('.btn-back').show();
                            $(wizard).find('.btn-finish').show();
                        }
                    } else if ($current == 1) {
                        $(wizard).find('.btn-back').hide();
                        $(wizard).find('.btn-next').hide();
                        $(wizard).find('.btn-finish').hide();
                    } else if($current == 2){

                        $(wizard).find('.btn-back').show();
                        $(wizard).find('.btn-next').hide();
                        $(wizard).find('.btn-finish').hide();
                    }else {
                        $(wizard).find('.btn-back').show();
                        $(wizard).find('.btn-next').show();
                        $(wizard).find('.btn-finish').hide();
                    }
                }
            });
//            if(actBoolean.id){
//                $('#wizardCard').bootstrapWizard('show',2);
//            }
            //编辑活动
            @if(!empty($activity->id))
                $('#wizardCard').bootstrapWizard('show',2);
            @endif


        });




    </script>
@endsection